<template>
  
    <div class="page-bar">
      <ul>
        <li>
          <a v-on:click="btnClick(1)">首页</a>
        </li>
        <li v-if="cur2>1">
          <a v-on:click="cur2--,pageClick()">上一页</a>
        </li>
        <li v-if="cur2==1">
          <a class="banclick">上一页</a>
        </li>
        <li v-for="index in indexs" :key="index" :class="{ 'active': cur2 == index}">
          <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="cur2!=totalPage2">
          <a v-on:click="cur2++,pageClick()">下一页</a>
        </li>
        <li v-if="cur2 == totalPage2">
          <a class="banclick">下一页</a>
        </li>
        <!-- <li>
          <a>
            共
            <i>{{totalPage}}</i>页
          </a>
        </li> -->
        <li>
          <a v-on:click="btnClick(totalPage2)">尾页</a>
        </li>
      </ul>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      page2: 1, // 页码
      pageSize2: 5, // 每页多少条
      fistrPage2: true, // 是否第一页
      lastPage2: false, // 是否最后一页
      totalPage2: 0, // 总页数
      totalRow2: "", // 总条数
      list2: [],
      cur2: 0 // 当前页码
    };
  },
  created() {
   this.getData2();
   
  },
  props:["father"],
  methods: {
    getData2() {
      this.$api
        .get(
         `http://api.museum24h.com/myidea10/api/list/xinwenzixun-${this.page2}-${this.pageSize2}`
        )
        .then(res => {
          let data = res.data.page;
          this.list2 = data.list;
          this.fistrPage2 = data.firstPage;
          this.lastPage2 = data.lastPage;
          this.totalPage2 = data.totalPage;
          this.totalRow2 = data.totalRow;
          this.cur2 = data.pageNumber;
           console.log(res);
        });
    },
    btnClick: function(data) {
      //页码点击事件
      if (data != this.cur2) {
        this.cur2 = data;
      }
      this.page2 = data;
      this.getData2();
    },
    pageClick() {
      this.page2 = this.cur2;
      this.getData2();
    }
  },
   computed: {
    indexs() {
      var left = 1;
      var right = this.totalPage2;
      var ar = [];
      if (this.totalPage2 >= 3) {
        if (this.cur2 > 2 && this.cur < this.totalPage2 - 1) {
          left = this.cur2 - 1;
          right = this.cur2 + 1;
        } else {
          if (this.cur2 <= 2) {
            left = 1;
            right = 3;
          } else {
            right = this.totalPage2;
            left = this.totalPage2 - 2;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    }
  },
  watch:{
    
  }
};
</script>
<style scoped>
/* fenye */
.page-bar {
  margin: 16px auto;
  margin-top: 60px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar ul {
  width: 620px;
  height: 40px;

  display: flex;
  margin: auto;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid rgb(190, 190, 190);
  text-decoration: none;
  position: relative;
  padding: 4px 12px;

  margin-left: -1px;

  color: #5d6062;
  cursor: pointer;
  margin-right: 20px;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: rgb(78, 105, 161);
  border-color: rgb(78, 105, 161);
}
.page-bar i {
  font-style: normal;
  color: rgb(78, 105, 161);
  margin: 0px 4px;
  font-size: 12px;
}
</style>